import { useCpuMonitorData } from '@/hooks'
import { FIXED_NUM } from '@shared/constants'
import ReactECharts from 'echarts-for-react'
import type { ComponentProps } from 'react'

export const CpuInfoMonitor: React.FC<ComponentProps<'div'>> = (props) => {
  const { currentValue: cpuInfo, history: cpuHistory } = useCpuMonitorData()

  const option = {
    title: {
      text: 'CPU使用率',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#475569' // 使用更柔和的颜色
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        const value = params?.[0]?.value
        return `CPU使用率: ${value !== undefined ? value.toFixed(FIXED_NUM) : 0}%`
      },
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e2e8f0',
      borderWidth: 1,
      textStyle: {
        color: '#475569'
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}%',
        fontSize: 10,
        color: '#64748b' // 柔和的轴标签颜色
      },
      axisLine: {
        lineStyle: {
          color: '#e2e8f0'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f1f5f9'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: cpuHistory.map(() => ''),
      axisLabel: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#e2e8f0'
        }
      }
    },
    series: [
      {
        data: cpuHistory,
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#6366f1', // 使用更现代的紫色
          width: 2
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(99, 102, 241, 0.3)' },
              { offset: 1, color: 'rgba(99, 102, 241, 0.05)' }
            ]
          }
        }
      }
    ],
    grid: {
      left: '10%',
      right: '10%',
      bottom: '20%',
      top: '20%'
    }
  }

  return (
    <div
      {...props}
      className={`card bg-white/70 backdrop-blur-sm shadow-lg border border-slate-200/50 hover:shadow-xl transition-all duration-300 ${props.className || ''}`}
    >
      <div className="card-body p-1">
        <div className="h-64">
          <ReactECharts
            option={option}
            style={{ height: '100%', width: '100%' }}
            opts={{ renderer: 'canvas' }}
          />
        </div>
        {cpuInfo !== undefined && (
          <div className="text-center mt-4">
            <div className="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg p-3">
              <span className="text-lg font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
                当前: {cpuInfo}%
              </span>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
